<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>井下数据链路监控系统</title>
    
    <script src="{{ url_for('static', filename='js/sync_data.js') }}"></script>
    {# <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script> #}
    <script src="{{ url_for('static', filename='js/mqtt.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/mqtt_send.js') }}"></script>
</head>
<body>

    <h1>井下数据链路监控系统</h1>

    <dev id="synchronize_data">

        <h2>1、同步数据</h2> 
        <button id="sync_data">点击同步sensor.db文件</button>

        <p>查看实事数据请点击<a href="{{ url_for('ws_') }}" target="_blank">传感器数据</a></p>

    </dev>



    <dev id="sensor_data">

        <h2>2、传感器数据</h2>

            <p>默认是最近4小时统计数据</p>

            
            <p>主站MAC:{{index_data['master_station_mac']}}</p>

            <p>在线数量:{{index_data['online_count']}}</p>

            <p>离线数量:{{index_data['offline_count']}}</p>
            <p>发送周期:{{index_data['send_interval']}}</p>

            <h3>选择时间范围:</h3>

            <dev id="time_filter">
                <form action="/" method="get">
                    <label for="start_time">开始时间:</label>
                    <input type="datetime-local" id="start_time" name="start_time" required><br><br>
                    
                    <label for="end_time">结束时间:</label>
                    <input type="datetime-local" id="end_time" name="end_time" required><br><br>
                    
                    <input type="submit" value="提交">
                </form>
            </dev>


            <dev>
                <h3>全部传感器开/关灯:</h3>

                <button id="all_light_on" onclick="send_all_light_message('on')">全部开灯</button>
                <button id="all_light_off" onclick="send_all_light_message('off')">全部关灯</button>

            </dev>


            <h3> sensor 数据:</h3>



            <p>start_time:{{start_time}}</p>
            <p>end_time:{{end_time}}</p>

            <table border="1">

                <thead>
                    <tr>

                        <th>序号</th>
                        <th>支架号</th>
                        <th>站点MAC</th>
                        <th>传感器类型</th>
                        <th>传感器MAC</th>
                        <th>类型</th>
                        <th>在线状态</th>
                        <th>提交时间</th>
                        <th>灯状态</th>
                        <th>数据</th>
                        <th>解析结果</th>
                        <th>实交次数</th>
                        <th>中断次数</th>
                        <th>应上传次数</th>
                        <th>上传比例</th>


                    </tr>
                </thead>
                <tbody>
                    {% for group_data in index_data['group_data_list'] %}

                    <!-- group_data is a dict, for example: 
                        {
                            'group_id': 1, 
                            'bracket_number': 7, 
                            'station_mac': '0100', 
                            'sensor_list': [
                                {
                                    'sensor_type': 'A', 
                                    'sensor_mac': '010A', 
                                    'sensor_type_name': '倾角', 
                                    'online_status': 'offline', 
                                    'update_time': None, 
                                    'row_data': None, 
                                    'parse_result': None,
                                    'parse_result': None, 
                                    'total_upload_times': None, 
                                    'interrupted_times': None, 
                                    'should_upload_times': None
                                }
                            ] -->

                    {% for sensor_data in group_data['sensor_list'] %}
                    <tr>
                        
                            {% if loop.index0==0 %}
                            <td rowspan="5">{{group_data['group_id']}}</td>
                            <td rowspan="5">{{group_data['bracket_number']}}</td>
                            <td rowspan="5">{{group_data['station_mac']}}</td>
                            {% endif %}
                        
                            <td>{{sensor_data['sensor_type']}}</td>
                            <!-- <td>{{sensor_data['sensor_mac']}}</td> -->
                            <td><a href="{{ url_for('sensor_data', sensor_mac=sensor_data['sensor_mac']) }}" target="_blank">{{sensor_data['sensor_mac']}}</a></td>
                            <td>{{sensor_data['sensor_type_name']}}</td>
                            <!-- <td>{{sensor_data['online_status']}}</td> -->
                            <!-- <td style="{% if sensor_data['online_status'] == 'online' %}color: green;{% elif sensor_data['online_status'] == 'offline' %}color: black;{% else %}color: red;{% endif %}">{{ sensor_data['online_status'] }}</td> -->
                            <td style="{% if sensor_data['online_status'] == 'online' %}background-color: green;{% elif sensor_data['online_status'] == 'offline' %}background-color: white;{% else %}background-color: red;{% endif %}">{{ sensor_data['online_status'] }}</td>
                            <td>{{sensor_data['update_time']}}</td>

                            <td>
                                {% if sensor_data['parse_result']['sensor_light'] == "00" %}
                                    <label class="switch" >
                                        <input type="checkbox" id="light_{{sensor_data['sensor_mac']}}">
                                        <span class="slider round"></span>
                                    </label>
                                {% else %}
                                    
                                    <label class="switch">
                                        <input type="checkbox" id="light_{{sensor_data['sensor_mac']}}" checked>
                                        <span class="slider round"></span>
                                    </label>
                                {% endif %}
                            </td>


                            <td>{{sensor_data['row_data']}}</td>
                            <td>{{sensor_data['parse_result']}}</td>
                            <td>{{sensor_data['interrupted_times']['total_upload_times']}}</td>
                            <td>{{sensor_data['interrupted_times']['interrupted_times']}}</td>
                            <td>{{sensor_data['interrupted_times']['should_upload_times']}}</td>

                            <td>
                                {% if sensor_data['interrupted_times'] and sensor_data['interrupted_times']['should_upload_times'] != 0 %}
                                    {{ (sensor_data['interrupted_times']['total_upload_times'] / sensor_data['interrupted_times']['should_upload_times'] * 100)|round(2) }} %
                                {% else %}
                                    0.00 %
                                {% endif %}
                            </td> <!-- 上传比例 -->

                            
                    </tr>
                    {% endfor %}

                    {% endfor %}
                </tbody>
            </table>



    </dev>  

    <!-- {{index_data}} -->

    <style>
    .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

    input:checked + .slider {
        background-color: #2196F3;
    }

    input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 34px;
    }

    .slider.round:before {
        border-radius: 50%;
    }
</style>

    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            // 获取所有的滑块开关
            const switches = document.querySelectorAll('.switch input');
        
            switches.forEach(switchInput => {
                switchInput.addEventListener('change', function() {
                    const sensorMac = this.id.split('_')[1]; // 获取 sensor_mac
                    var isChecked = this.checked; // 获取当前开关状态

                    if (isChecked) {
                        // 打开灯
                        var light_status = "01"
                    } else {
                        // 关闭灯
                        console.log('关闭灯')
                        var light_status = "00"
                    }

                    console.log('sensorMac:', sensorMac, 'light_status:', light_status)
                    // 禁用开关
                    this.disabled = true;
        
                    // 调用下发接口
                    send_sensor_light_message(sensorMac, light_status)
                });
            });
        });

        // 同步数据
        function send_all_light_message(light_status) {
            console.log('send_all_light_message', light_status)
            // 调用下发接口

            if (light_status == 'on') {
                var light_status = "01"
            } else {
                var light_status = "00"
            }

            send_sensor_light_message('0000', light_status)

        };
    </script>

    
</body>
</html>
